{extend name='common/common' /}
{block name="style"}

{/block}
{block name="content"}
<el-row><el-col :lg="12">
	<div class="ibox-title">
	    <h5>API配置</h5>
	</div>
	<div class="ibox-content">
		<el-tabs tab-position="left">
			{volist name="cateArr" id="cate"}
			<el-tab-pane label="{$cate.label}">
					<el-form :model="form.cfgForm_{$cate.id}" label-width="100px" inline>
					<el-form-item label="接口操作">
						<el-button type="warning" plain @click="editCate({$cate.id})">编辑接口</el-button>
						<el-button type="danger" plain @click="delCate({$cate.id})">删除接口</el-button>
					</el-form-item><br>
					{volist name="cate.item" id="v" key="k"}
					<el-form-item label="{$v.label}">
						<el-input v-model="form.cfgForm_{$cate.id}.id_{$v.id}.val"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" plain icon="el-icon-delete" circle size="mini"
						@click='delCfg({$v.id})'></el-button>
					</el-form-item><br>
					{/volist}
					<el-form-item label="配置操作">
						<el-button type="success" plain @click="addCfg({$cate.id})">新增配置</el-button>
						<el-button type="primary" plain @click="subForm(form.cfgForm_{$cate.id})">提交配置</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			{/volist}
			<el-tab-pane label="新增接口">
				<el-form :model="cateForm" label-width="80px" inline>
					<el-form-item label="接口名称">
						<el-input v-model="cateForm.label"></el-input>
					</el-form-item><br>
					<el-form-item label=" ">
						<el-button type="primary" plain @click="subCateForm">提交</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</el-col></el-row>
{/block}
{block name="component"}
<div id="addFormBox">
	<el-dialog :title="FormTitle" :visible.sync="showForm" top="5vh">
		<div class="FormBox">
			<el-form
				label-width="100px" :model="form"
				:rules="rules" ref="form" class="curForm">
				<el-form-item label="配置名称" prop="label">
					<el-input v-model="form.label" placeholder="请输入配置名称"></el-input>
				</el-form-item>
				<el-form-item label="配置值" prop="val">
					<el-input v-model="form.val" placeholder="请输入配置值"></el-input>
				</el-form-item>
				<el-form-item label="配置标识" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入配置标识"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showForm = false">取消</el-button>
			<el-button type="success" @click="subForm">保存</el-button>
		</div>
	</el-dialog>
</div>
<div id="editCateBox">
	<el-dialog :title="FormTitle" :visible.sync="showForm" top="5vh">
		<div class="FormBox">
			<el-form :model="form" label-width="80px" inline :rules="rules" ref="form">
				<el-form-item label="接口名称">
					<el-input v-model="form.label"></el-input>
				</el-form-item><br>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showForm = false">取消</el-button>
			<el-button type="success" @click="subForm">保存</el-button>
		</div>
	</el-dialog>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function(){
	$.getJSON("./getForm",function(res){
		var main = new Vue({
			el:"#main",
			data() {
				return {
					loading:false,
					form:res.data,
					cateForm:{
						cate_id:0,
						is_cate:1,
						label:'',
					}
				}
			},
			methods:{
				addCfg(cate_id) {
					addFormBox.showForm = true;
					addFormBox.form.cate_id = cate_id;
				},
				delCfg(id) {
					this.$confirm('此操作将永久删除该数据,是否继续?','提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						$.post("./delCfg",{"id":id},function(res){
							if(res.code == 1){
								main.$confirm(res.msg, '成功', {
									confirmButtonText: '确定',
									showClose:false,
									type: 'success',
									showCancelButton:false
								}).then(() => {
									window.location.reload();
								});
							}else{
								main.$notify.error({
									title: '错误'+res.code,
									message: res.msg
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title:"消息",
							message: "已取消删除"
						})
					});
				},
				subForm(data){
					$.post('./editCfg',data,function(res){
						if(res.code == 1){
							main.$confirm(res.msg, '成功', {
								confirmButtonText: '确定',
								showClose:false,
								type: 'success',
								showCancelButton:false
							}).then(() => {
								window.location.reload();
							});
						}else{
							main.$error({
								title: '错误'+res.code,
								message: res.msg
							});
						}
					});
				},
				subCateForm() {
					var param = this.cateForm;
					$.post('./newCfg',param,function(res){
						if(res.code == 1){
							addFormBox.showForm = false;
							main.$confirm(res.msg, '成功', {
								confirmButtonText: '确定',
								showClose:false,
								type: 'success',
								showCancelButton:false
							}).then(() => {
								window.location.reload();
							});
						}else{
							main.$notify.error({
								title:'错误',
								message:res.msg
							});
						}
					})
				},
				editCate(cate_id) {
					editCateBox.showForm = true;
					editCateBox.form.id = cate_id;
				},
				delCate(cate_id) {
					this.$confirm('此操作将永久删除该数据,是否继续?','提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						$.post("./delCate",{"cate_id":cate_id},function(res){
							if(res.code == 1){
								main.$confirm(res.msg, '成功', {
									confirmButtonText: '确定',
									showClose:false,
									type: 'success',
									showCancelButton:false
								}).then(() => {
									window.location.reload();
								});
							}else{
								main.$error({
									title: '错误'+res.code,
									message: res.msg
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title:"消息",
							message: "已取消删除"
						})
					});
				}
			}
		});
		var addFormBox = new Vue({
			el:"#addFormBox",
			data() {
				return {
					showForm:false,
					FormTitle:"新增",
					form:{
						cate_id:0,
						is_cate:0,
						label:'',
						val:'',
						remark:'',
					},
					rules:{
						label:[
							{required:true,message:'配置名称不能为空',trigger:['blur','change']},
							{min:2,max:6,message:'长度在2到6个字符',trigger:['blur','change']}
						]
					}
				}
			},
			methods:{
				subForm() {
					this.$refs['form'].validate((valid) => {
						if(valid){
							var param = this.form;
							$.post('./newCfg',param,function(res){
								if(res.code == 1){
									addFormBox.showForm = false;
									main.$confirm(res.msg, '成功', {
										confirmButtonText: '确定',
										showClose:false,
										type: 'success',
										showCancelButton:false
									}).then(() => {
										window.location.reload();
									});
								}else{
									main.$notify.error({
										title:'错误',
										message:res.msg
									});
								}
							})
						}
					})
				}
			}
		});
		var editCateBox = new Vue({
			el:"#editCateBox",
			data() {
				return {
					showForm:false,
					FormTitle:"编辑接口",
					form:{
						id:0,
						cate_id:0,
						is_cate:1,
						label:'',
					},
					rules:{
						label:[{required:true,message:'接口名称不能为空',trigger:['blur','change']}]
					}
				}
			},
			methods:{
				subForm() {
					this.$refs['form'].validate((valid) => {
						if(valid){
							var param = {
								0:this.form
							};
							$.post('./editCfg',param,function(res){
								if(res.code == 1){
									addFormBox.showForm = false;
									main.$confirm(res.msg, '成功', {
										confirmButtonText: '确定',
										showClose:false,
										type: 'success',
										showCancelButton:false
									}).then(() => {
										window.location.reload();
									});
								}else{
									main.$notify.error({
										title:'错误',
										message:res.msg
									});
								}
							})
						}
					})
				}
			}
		});
	})
});

</script>
{/block}
